import Home from '@web/pages/Home/Home';
import Loading from '@components/Lib/Loading';
import Storage from '@pages/HooksDemo/Storage';
import React, { lazy, ReactNode, Suspense } from 'react';
import { Route, RouteProps, Switch } from 'react-router-dom';
import { renderRoutes } from 'react-router-config';
import NotFound from '../ui/components/Lib/NotFound/NotFound';

const Demo = lazy(() => import('@pages/Demo'));

interface RProps extends RouteProps {
  auth?: string;
}

// render?: (props: RouteComponentProps<any>) => React.ReactNode;
// children?: ((props: RouteChildrenProps<any>) => React.ReactNode) | React.ReactNode;
const routesArr: RProps[] = [
  {
    component: Home,
    path: '/',
    exact: true,
  },
  {
    component: Demo,
    // path: '/demos/:id',
    path: '/demos/:id',
    exact: true,
  },
  {
    component: Storage,
    path: '/store',
    exact: true,
  },
];

const Routes = ():ReactNode => (
  <Suspense fallback={<Loading />}>
    <Switch>
      {/* {routesArr.map((r, index) => {
        console.log('[ 🍊 ]', index);
        const routeKey = `route-${index}`;
        const { component, path, exact } = r;
        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
        const LazyCom = component!;
        return (
          <Route
            key={routeKey}
            path={path}
            exact={exact}
                    // eslint-disable-next-line react/jsx-props-no-spreading
            render={(props) => <LazyCom {...props} />}
          />
        );
      })} */}
      {renderRoutes(routesArr)}
      <Route component={NotFound} />
    </Switch>

  </Suspense>
);

export default Routes;
